<template>
	<view class="tourOrderDetails">
		<view class="area-title">{{ statusType[orderDetails.status] }}</view>
		<view class="area-box">
			<view class="tour_order_info_box">
				<view class="fn-sz-30 fn-cl-222222 mar-bottom-20">{{ orderDetails.order_name }}</view>
				<view class="fn-sz-26 fn-cl-222222 mar-bottom-20">{{ orderDetails.option_name }}</view>
				<view class="tour_order_info_num_box fn-cl-666666 fn-sz-26">
					<view class="mar-right-30">数量:X{{ orderDetails.num }}</view>
					<view class="">商品单价: ￥{{ orderDetails.price }}</view>
				</view>
			</view>
		</view>
		<view class="area-title" v-if="orderDetails.status == 'done'">评价信息</view>
		<view class="area-box" v-if="orderDetails.status == 'done'">
			<view class="tour_comment_box">
				<Rate :gutter="5" :size="22" :value="orderDetails.comment.star" :readonly="true"></Rate>
				<view class="fn-sz-28 fn-cl-222222 mar-bottom-20">{{ orderDetails.comment.content }}</view>
				<view class="tour_comment_img_list">
					<image :src="imgItem" mode="" v-for="(imgItem, index) in orderDetails.comment.images" :key="index">
					</image>
				</view>
			</view>
		</view>

		<view class="area-title">订单信息</view>
		<view class="area-box">
			<view class="row-box-flex">
				<view class="row-box-flex-title">订单编号</view>
				<view class="row-box-flex-text">{{ orderDetails.order_sn }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">变更时间</view>
				<view class="row-box-flex-text">{{ orderDetails.update_time }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">订单金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.total_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">积分抵扣</view>
				<view class="row-box-flex-text">￥{{ orderDetails.score_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">金币抵扣</view>
				<view class="row-box-flex-text">￥{{ orderDetails.coin_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">支付金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.order_price }}</view>
			</view>
			<view class="row-box-flex" v-if="orderDetails.type!=1">
				<view class="row-box-flex-title">订单说明</view>
				<view class="row-box-flex-text" v-if="orderDetails.type==2"><span class="mar-bottom-10">剩余次数：</span>
					{{orderDetails.times-orderDetails.used_times}}
				</view>
				<view class="row-box-flex-text" v-if="orderDetails.type==3"><span class="mar-bottom-10">有效期至：</span>
					{{orderDetails.expire_time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Rate from '../../components/rate/rate.vue';
	export default {
		components: {
			Rate
		},
		data() {
			return {
				order_id: '',
				orderDetails: {},
				statusType: {
					unpay: '待付款',
					payed: '待配送',
					deliver: '配送中',
					wait_comment: '待评价',
					done: '已完成',
					sale_service: '售后',
					cancel: '已取消'
				},
				isGrouper: false
			};
		},
		onLoad(val) {
			if (val.order_id) {
				this.order_id = val.order_id;
				this.getOrderDetail();
			}
		},
		methods: {
			getOrderDetail() {
				this.$api.getTourOrderDetail({
					order_id: this.order_id
				}).then(res => {
					console.log(res, '订单详情');
					this.orderDetails = res.data;
				});
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	};
</script>

<style lang="scss">
	.tourOrderDetails {
		min-height: 100vh;
		background-color: #f9f9f9;
		padding: 24rpx;

		.area-box {
			padding: 26rpx 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 40rpx;

			.inner-row-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.inner-row-box-title {}

				.inner-row-box-text {
					font-size: 28rpx;
				}
			}

			.row-box-flex {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.row-box-flex-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 30rpx;
				}

				.row-box-flex-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.reason_box {
				.reason_text {
					margin-top: 12rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}

				.reason_img_list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.reason_img_item {
						margin-right: 27rpx;
						flex: none;
						margin-bottom: 10rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 8rpx;
						}

						&:nth-child(3n) {
							margin-right: 0rpx;
						}
					}
				}
			}
		}

		.tour_comment_box {
			.tour_comment_img_list {
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 12rpx;
					margin-right: 27rpx;
					margin-bottom: 15rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}

		.tour_order_info_num_box {
			display: flex;
			align-items: center;
		}
	}
</style>